<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>申报者注册</title>
@include('common-css')
<style>
a {
    text-decoration: none;
}

html,
body {
    min-height: 100%;
    overflow-y: auto;
}

body {
    background: url(/images/bg-buildings.jpg) bottom center no-repeat;
}

.content {
    width: 100%;
    /* min-width: 1200px; */
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 50px;
}

h1 {
    margin-top: 30px;
    color: #10479e;
    font-family: serif;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

.customer-name-en {
    margin-top: 10px;
    color: #666;
    font-size: 24px;
    text-align: center;
}

h2 {
    margin-top: 20px;
    color: #10479e;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

.browser-requirement {
    color: #888;
    margin-top: 20px;
    font-size: 12px;
    text-align: center;
}

.browser-requirement a {
    color: #888;
}

.login_box {
    width: 450px;
    background: #fff;
    box-sizing: border-box;
    margin: 30px auto 0;
    border-radius: 5px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

.login_title {
    width: 100%;
    text-align: center;
    line-height: 60px;
    height: 60px;
    font-size: 22px;
    font-weight: 600;
    color: #555;
}

.desc {
    width: 100%;
    font-size: 14px;
    color: #ff8600;
    text-align: center;
}

.login_input_container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px;
}

.input_box {
    width: 100%;
    height: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.input_label {
    width: 120px;
    box-sizing: border-box;
}
</style>
</head>
<body>

<div class="content">
    <h1>{{ config('vars.full_sys_name') }}</h1>

    <div class="login_box" id="app">
    </div>
</div>

</body>
</html>

<script id="appTemplate" type="x-template">
<div class="login_box" v-cloak>
    <div class="login_title">申报者注册</div>
    <div class="desc">所有项均为必填项</div>


    <div class="login_input_container">

        <div class="input_box">
            <div class="input_label">用户类型</div>
            <div class="input_box">
                <a-radio-group @change="" v-model="registerInfo.entity_type">
                    <a-radio value="personal">个人</a-radio>
                    <a-radio value="org">单位</a-radio>
                </a-radio-group>
            </div>
        </div>

        <div class="input_box">
            <div class="input_label">用户名</div>
            <div class="input_box">
                <a-input placeholder="3-16位，可使用字母、数字、下划线" size="large" v-model="registerInfo.username"
                         ref="usernameInput">
                </a-input>
            </div>
        </div>

        <div class="input_box">
            <div class="input_label">邮箱</div>
            <div class="input_box">
                <a-input placeholder="输入登录邮箱" size="large" v-model="registerInfo.email" ref="emailInput">
                </a-input>
            </div>
        </div>
        <div class="input_box">
            <div class="input_label">密码</div>
            <div class="input_box">
                <a-input placeholder="8-16位" maxlength="16" size="large" type="password"
                         v-model="registerInfo.password"
                         autocomplete="new-password">
                </a-input>
            </div>
        </div>
        <div class="input_box">
            <div class="input_label">确认密码</div>
            <div class="input_box">
                <a-input placeholder="确认密码" maxlength="16" size="large" type="password" v-model="registerInfo.check">
                </a-input>
            </div>
        </div>

        <template v-if="registerInfo.entity_type == 'personal'">

            <div class="input_box">
                <div class="input_label">姓名</div>
                <div class="input_box">
                    <a-input placeholder="输入真实姓名" size="large" v-model="registerInfo.name">
                    </a-input>
                </div>
            </div>
            <div class="input_box">
                <div class="input_label">联系电话</div>
                <div class="input_box">
                    <a-input placeholder="输入常用手机号" maxlength="11" size="large" v-model="registerInfo.tel">
                    </a-input>
                </div>
            </div>
            <div class="input_box">
                <div class="input_label">工作单位</div>
                <div class="input_box">
                    <a-input placeholder="输入单位名称" size="large" v-model="registerInfo.work_org_name">
                    </a-input>
                </div>
            </div>

        </template>

        <template v-else>

            <div class="input_box">
                <div class="input_label">单位名称</div>
                <div class="input_box">
                    <a-input placeholder="输入单位完整名称" size="large" v-model="registerInfo.name">
                    </a-input>
                </div>
            </div>
            <div class="input_box">
                <div class="input_label">营业执照</div>
                <div class="input_box">
                    <template v-if="registerInfo.org_biz_lic_photo">
                        <span style="color:green;">上传成功，请继续完成注册</span>
                    </template>
                    <template v-else>
                        <div>
                            <a-upload name="file" accept=".jpg,.jpeg,.png" :showUploadList="false"
                                      action="/api/common/upload" :beforeUpload="handleOrgBusinessLicensePhotoBeforeUpload"
                                      @change="handleOrgBusinessLicensePhotoUploadChange($event)">
                                <a-button>上传图片</a-button>
                            </a-upload>
                        </div>
                        <p style="margin-left: 10px; font-size: 14px; color:#666; line-height: 20px;">加盖公章的扫描件，JPG 格式，供管理员审核</p>
                    </template>
                </div>
            </div>
            <div class="input_box">
                <div class="input_label">联系人</div>
                <div class="input_box">
                    <a-input placeholder="输入联系人姓名" size="large" v-model="registerInfo.org_contact">
                    </a-input>
                </div>
            </div>
            <div class="input_box">
                <div class="input_label">联系电话</div>
                <div class="input_box">
                    <a-input placeholder="输入联系电话" size="large" v-model="registerInfo.tel">
                    </a-input>
                </div>
            </div>

        </template>

        <div class="input_box">
            <div class="input_label"></div>
            <div class="input_box">
                <a-button type="primary" @click="handleSubmit" :disabled="isSending">注 册</a-button>
                <a style="margin-left: 20px;" href="javascript:;" onclick="history.go(-1)">返回上一页</a>
                <a style="margin-left: 20px;" href="/apply/login">已有账号，登录</a>
            </div>
        </div>
    </div>
</div>
</script>

@include('common-js')

<script>
Vue.prototype.$axios = axios
var app = new Vue({
    el: '#app',
    template: '#appTemplate',
    data: {
        isSending: false,
        entityTypes: [
            'personal',
            'org'
        ],
        registerInfo: {
            entity_type: 'personal',
            username: '',
            email: '',
            password: '',
            check: '',
            name: '',
            org_biz_lic_photo: '',
            org_contact: '',
            tel: '',
            work_org_name: ''
        }
    },
    mounted() {
        this.$refs.usernameInput.$refs.input.focus()
    },
    methods: {
        // 点击注册
        handleSubmit() {
            let {entity_type, username, email, password, check, name, org_biz_lic_photo, org_contact, tel, work_org_name} = this.registerInfo
            if (this.isSending) return
            if (!username) return this.$message.error("请填写用户名")
            if (username.length < 3 || username.length > 16) return this.$message.error("用户名长度应为3-16位")
            if (!email) return this.$message.error("请填写邮箱")
            if (!email.includes("@")) return this.$message.error("邮箱格式不正确")
            if (!password) return this.$message.error("请填写密码")
            if (password.length < 8 || password.length > 16) return this.$message.error("密码长度应为8-16位")
            if (!check) return this.$message.error("请确认密码")
            if (password != check) return this.$message.error("两次填写密码不一致")

            if (entity_type == 'personal') {
                if (!name) return this.$message.error("请填写姓名")
                if (!tel) return this.$message.error("请填写联系电话")
                if (!work_org_name) return this.$message.error("请填写工作单位名称")
            } else {
                if (!name) return this.$message.error("请填写单位名称")
                if (!org_biz_lic_photo) return this.$message.error("请上传营业执照")
                if (!org_contact) return this.$message.error("请填写联系人")
                if (!tel) return this.$message.error("请填写联系电话")
            }

            let encryptedText = encrypt.encrypt(password)
            this.isSending = true
            this.$message.loading('正在提交...', 0)
            this.$axios.post("/api/auth/applicant-register", {
                entity_type,
                username,
                email,
                password: encryptedText,
                name,
                tel,
                work_org_name,
                org_biz_lic_photo,
                org_contact
            }).then(res => {
                console.log(res);
                this.$message.destroy()
                this.isSending = false
                if (res.data.ok) {
                    this.success()
                } else {
                    this.$message.error(res.data.message)
                }
            })


        },
        handleOrgBusinessLicensePhotoBeforeUpload(file) {
            console.log('handleOrgBusinessLicensePhotoBeforeUpload', file)
            var filename = file.name.toLowerCase()
            if (filename.endsWith('.jpg') || filename.endsWith('.jpeg') || filename.endsWith('.png')) {
                antd.message.loading('正在上传...', 0)
                return true
            } else {
                antd.message.warn('不允许上传该文件格式')
                return false
            }
        },
        handleOrgBusinessLicensePhotoUploadChange(event) {
            console.log('handleOrgBusinessLicensePhotoUploadChange', event)
            if (event.file.status == 'done') {
                antd.message.destroy()
                if (event.file.response.ok) {
                    antd.message.success('上传成功，请继续完成注册')
                    this.registerInfo.org_biz_lic_photo = event.file.response.url
                } else {
                    antd.message.warn('上传失败')
                }
            }
        },
        success() {
            this.$success({
                title: '注册成功',
                content: (  // JSX support
                    `注册成功，即将跳转到登录页面`
                ),
                onOk() {
                    location = "/apply/login"
                }
            });
        }
    }
})
</script>